<nz-spin [nzSpinning]="loading" [nzDelay]="500">
  <form nz-form [formGroup]="validateForm">
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="16">
        <nz-form-item>
          <nz-form-label nzRequired nzFor="documentTitle">标题</nz-form-label>
          <nz-form-control nzErrorTip="标题不能为空且长度小于20">
            <input nz-input formControlName="documentTitle" id="documentTitle"/>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <nz-form-item>
          <nz-form-label nzRequired nzFor="productId">产品</nz-form-label>
          <nz-form-control>
            <nz-select [formControlName]="'productId'" nzShowSearch>
              <nz-option nzValue="" nzLabel="请选择"></nz-option>
              <nz-option [nzValue]="p.pid" [nzLabel]="p.productName" *ngFor="let p of allProducts"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
  <div nz-row [nzJustify]="'center'">
    <div [nzSm]="20" [nzXs]="20" nz-col>
      <button nz-button (click)="fullScreen=true" *ngIf="!fullScreen" nzType="link">
        <i nz-icon nzType="fullscreen"></i>全屏
      </button>
      <button nz-button (click)="fullScreen=false" *ngIf="fullScreen" nzType="link" class="exit-full-screen">
        <i nz-icon nzType="fullscreen-exit"></i> 退出全屏
      </button>
    </div>
    <div [nzSm]="20" [nzXs]="20" nz-col class="document-text-div">
      <div class="document-editor" [ngClass]="{'full-screen':fullScreen}">
        <div class="document-editor__toolbar" #toolBar></div>
        <div class="document-editor__editable-container">
          <div class="document-editor__editable" [ngClass]="{'full-screen':fullScreen}" #editor>
          </div>
        </div>
      </div>
    </div>
  </div>
  <nz-divider nzPlain nzText="使用情况" nzOrientation="left"></nz-divider>
  <div nz-row nzJustify="center" class="product-project-header">
    <div nz-col [nzSm]="12">项目</div>
    <div nz-col [nzSm]="4">
      <button nz-button nzType="primary" [nzSize]="'small'" nzShape="round" (click)="isVisible=true"
              [disabled]="!productId">
        <i nz-icon nzType="plus"></i>
      </button>
    </div>
  </div>
  <div nz-row nzJustify="center" *ngFor="let pp of projects;let i = index" class="product-project-item"
  >
    <div nz-col [nzSm]="12" [class.odd-row]="i%2===0">{{pp.projectName}}</div>
    <div nz-col [nzSm]="4" [class.odd-row]="i%2===0">
      <button nz-button nzType="primary" [nzSize]="'small'" nzShape="round" (click)="deleteProject(i)">
        <i nz-icon nzType="minus"></i>
      </button>
    </div>
  </div>
  <div nz-row class="save-button">
    <div [nzSm]="4" [nzXs]="24" nz-col>
    </div>
    <div [nzSm]="16" [nzXs]="24" nz-col class="save-btn-div">
      <button nz-button nzType="primary" [disabled]="!validateForm.valid || loading" nzShape="round"
              (click)="submitForm()">
        <i nz-icon nzType="save"></i>保存
      </button>
      <button nz-button nzType="primary" [disabled]="!validateForm.valid || loading" nzShape="round"
              (click)="submitForm('1')">
        <i nz-icon nzType="save"></i>发布
      </button>
      <br>
    </div>
  </div>

  <nz-modal [(nzVisible)]="isVisible" nzTitle="请选择" (nzOnCancel)="isVisible=false" [nzStyle]="{ width: '1000px' }"
            [nzFooter]="null">
    <ng-container *nzModalContent>
      <app-project-selection (cancel)="isVisible=false" [productId]="productId" [disable]="disabledIds"
                             (success)="selectProject($event)">
      </app-project-selection>
    </ng-container>
  </nz-modal>
</nz-spin>
